<template>
  <el-card header="评分规则设定">
    <div class="tree-box">
      <div class="btn-box">
        <el-button type="primary" :icon="Plus" @click="addPop">新增</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%" height="600">
        <el-table-column type="expand">
          <template #default="props">
            <div style="padding: 0 50px;">
              <el-table :data="props.row.childs" :border="true">
                <el-table-column label="细则" prop="rulesName" />
                <el-table-column label="分值" prop="score" />
                <el-table-column label="描述" prop="score" />
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" :show-overflow-tooltip="true" width="80" align="center" />
        <el-table-column label="评分规则" prop="rulesName" :show-overflow-tooltip="true"  align="center" />
        <el-table-column label="评分分值" prop="score" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <!-- <MA type="primary" @click="editRule(scope.row.userId)">编辑</MA> -->
            <MA type="danger" @click="deleteRule(scope.row.id)">删除</MA>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <el-dialog @close="formCancel" title="新增规则" v-model="dialogResultVisible" width="1000px" top="4vh" append-to-body
    draggable>
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="100px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="规则名称" prop="">
            <el-select @change="changeFirstClass" style="width: 100%;" value-key="enName" v-model="chooseRule"
              placeholder="请选择规则" filterable>
              <el-option v-for="typeItem in fTypeOptions" :key="typeItem.id" :label="typeItem.cnName"
                :value="typeItem"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分值" prop="score">
            <el-input-number v-model="ruleForm.score" size="large" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="single-task" v-for="(item, index) in ruleForm.childs">
        <div class="task-title">
          <span>细则{{ indexToChinese[index] }}</span>
          <div>
            <el-button @click="addRuleC(index, item.manPlanId)" type="primary" size="mini" :icon="Plus"
              circle></el-button>
            <el-button v-if="ruleForm.childs.length > 1" @click="deleteRuleC(index, item.manPlanId)" type="danger"
              size="mini" icon="el-icon-delete" circle></el-button>
          </div>
        </div>
        <div style="padding: 10px 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="细则名称" prop="name">
                <el-select style="width: 100%;" value-key="id" v-model="ruleForm.childs[index].rules"
                  placeholder="请选择细则类型">
                  <el-option v-for="typeItem in sTypeOptions" :key="typeItem.id" :label="typeItem.name"
                    :value="typeItem"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分值" prop="score">
                <el-input-number v-model="ruleForm.childs[index].score" :precision="1" :step="0.5" @change="changeTime"
                  placeholder=""></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="描述:" prop="workPlan">
                <el-input type="textarea" v-model="ruleForm.childs[index].remark" placeholder="请输入细则描述"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; width: 100%">
        <el-button @click="formCancel()">取消</el-button>
        <el-button type="primary" @click="submitForm" v-loading="loading">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { ref, reactive, nextTick, provide } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { addRule, searchRule, removeRule, getFirstDict } from '@/api/evaluate/rules'
import { ElLoading, ElMessageBox, ElMessage } from 'element-plus'



let fTypeOptions = ref([])
let sTypeOptions = ref([])
let chooseRule = ref({})
const ruleFormRef = ref()
const rules = ref({
  rulesName: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
  score: [{ required: true, message: '请输入分值', trigger: 'blur' }]
})


const indexToChinese = ref(['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'])
const tableData = ref([])
const ruleForm = reactive({
  rulesName: '',
  rulesParamName: '',
  rulesId: '',
  score: '',
  childs: [{
    rules: [],
    rulesName: '',
    rulesId: '',
    score: '',
    remark: '',
  }]
})
const dialogResultVisible = ref(false)

//查询参数管理所有规则
const getFOption = () => {
  getFirstDict().then((res) => {
    console.log(res.data.param)
    fTypeOptions.value = res.data.param
  })
}

// 获取参数层级数据
const changeFirstClass = (item) => {
  const { sysParameterInfo } = item
  sTypeOptions.value = sysParameterInfo
}

getFOption();

const search = () => {
  searchRule().then((res) => {
    tableData.value = res.data.rows
  })
}

const deleteRule = (id) => {
  ElMessageBox.confirm(
    '至少选中一条数据，否则系统讲按列表所有数据生成',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      removeRule({ id }).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        search()
      })
    })
    .catch(() => { })
}
const editRule = (id) => {

}

search()

const clearForm = () => {
  ruleForm.rulesName = ''
  ruleForm.score = ''
  ruleForm.childs = [{
    rules: [],
    rulesName: '',
    rulesId: '',
    score: '',
    remark: '',
  }]
}

const addPop = () => {
  dialogResultVisible.value = true
}

const deleteRuleC = (index, manPlanId) => {
  if (manPlanId) {
    ElMessageBox.confirm('是否确认删除该条任务？').then(() => {

    })
  } else {
    ruleForm.childs.splice(index, 1)
  }
}
const addRuleC = () => {
  ruleForm.childs.push({
    rules: [],
    rulesName: '',
    rulesId: '',
    score: '',
    remark: '',
  })
}
const formCancel = () => {
  back()
}
const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (!valid) return
    const { cnName, id, enName } = chooseRule.value
    ruleForm.rulesId = id
    ruleForm.rulesName = cnName
    ruleForm.rulesParamName = enName

    ruleForm.childs = ruleForm.childs.map(item => {
      const { name, id } = item.rules;
      return { rulesId: id, rulesName: name, score: item.score, remark: item.remark, }
    })

    addRule({ ...ruleForm }).then((res) => {
      ElMessage({
        type: 'success',
        message: '新增成功'
      })
      back()
    })
  })
}

const back = () => {
  clearForm()
  dialogResultVisible.value = false
}
</script>
<style lang="scss" scoped>
.btn-box {
  padding-bottom: 10px;
}

.single-task {
  border: 1px solid #efefef;
  margin-bottom: 20px;
  width: 100%;
  display: block;

  .task-title {
    background-color: rgb(230, 234, 243);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    font-size: 20px;
    color: #69717e;
    height: 40px;
  }

  .el-form-item {
    margin: 0;
  }
}
</style>
